/*
 * @Description: 原文导入规则 - 文件导入规则表格
 * @Author: Rfan
 * @Date: 2022-05-07 17:34:26
 * @LastEditTime: 2022-08-09 11:50:49
 */

import { useEffect } from 'react';
import { Button, Form, Input, InputNumber, message, Select, Space, Typography } from 'antd';
import { PlusOutlined, MinusOutlined, FolderOpenOutlined, EnterOutlined } from '@ant-design/icons';
import { saveOriginRule } from '@/api/accession';
import { useAccessionMgtContext } from '../../../../contexts/AccessionMgtContext';

const { Option } = Select;

const PathForm = (props: any) => {
  const { form, data, metadata = [] } = props;
  const { activeBatch, updateBatchList } = useAccessionMgtContext();

  useEffect(() => {
    if (data) {
      form.setFieldsValue(data);
    }
  }, [data]);

  const pathFinish = (vals: any) => {
    const params: any = { batchId: activeBatch.id };
    params.originalRule = { ruleType: 1 };
    vals.level = 1;
    params.originalRule.folderRule = vals;

    saveOriginRule(params).then((res) => {
      message.success('保存成功');
      const { data } = res;
      updateBatchList({ ...activeBatch, attOriginalRule: data.originalRule });
    });
  };

  return (
    <>
      <Typography.Paragraph type="danger">
        注：文件夹的数据拼接结果即为需匹配文件字段（序号为拼接顺序，由小到大排列）。
      </Typography.Paragraph>
      <Form
        form={form}
        name="FolderForm"
        initialValues={{ path: data }}
        autoComplete="off"
        size="small"
        onFinish={pathFinish}
      >
        <Form.Item noStyle>
          <Space>
            <Form.Item
              name="fieldName"
              label="匹配文件级字段"
              rules={[{ required: true, message: '请选择字段' }]}
            >
              <Select placeholder="请选择文件级字段" style={{ width: 140 }}>
                {metadata.map((item: any) => (
                  <Option key={item.field_name} value={item.field_name}>
                    {item.field_desc}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item name="concatMark" label="匹配分隔符" rules={[{ required: true }]}>
              <Input placeholder="请填写分隔符" />
            </Form.Item>
          </Space>
        </Form.Item>
        <Form.Item
          label={
            <>
              <FolderOpenOutlined />
              &nbsp;&nbsp;根目录
            </>
          }
          colon={false}
        ></Form.Item>
        <Form.List name="folderRealRuleList">
          {(fields, { add, remove }) => (
            <>
              {fields.map((field) => {
                return (
                  <div key={field.key}>
                    <Space align="baseline">
                      <span>
                        &nbsp;
                        <EnterOutlined />
                        &nbsp;
                        <FolderOpenOutlined />
                      </span>
                      <Form.Item
                        {...field}
                        key={`${field.key}-1`}
                        label="序号"
                        name={[field.name, 'sortNo']}
                        rules={[{ required: true, message: '请填写序号' }]}
                      >
                        <InputNumber />
                      </Form.Item>
                      <Form.Item {...field} key={`${field.key}-2`} name={[field.name, 'regex']}>
                        <Input placeholder="填写正则表达式" />
                      </Form.Item>
                    </Space>
                  </div>
                );
              })}
              <Form.Item>
                <Space>
                  <Button
                    type="dashed"
                    icon={<PlusOutlined />}
                    disabled={fields.length >= 10}
                    onClick={() => add({ sortNo: fields.length + 1, regex: '' })}
                  >
                    增加层级
                  </Button>
                  <Button
                    type="dashed"
                    icon={<MinusOutlined />}
                    onClick={() => remove(fields.at(-1)?.name)}
                  >
                    删除层级
                  </Button>
                </Space>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </>
  );
};

export default PathForm;
